<template>
  <div class="demo-collapse">
    <ElCollapse v-model="activeNames">
      <ElCollapseItem name="base">
        <span class="zj-span">基础组件</span>
        <div
          v-for="(item, index) in baseNodes"
          :key="index"
          class="red-ui-palette-node ui-draggable ui-draggable-handle"
          :style="{ backgroundColor: item.background }"
          @mousedown="startDrag(item)"
        >
          <div class="red-ui-palette-label">
            {{ item.text }}
          </div>
          <div class="red-ui-palette-icon-container">
            <div
              class="red-ui-palette-icon"
              :style="{ backgroundImage: `url(${item.icon})`}"
            />
          </div>
          <div class="red-ui-palette-port red-ui-palette-port-input" />
          <div class="red-ui-palette-port red-ui-palette-port-output" />
        </div>
      </ElCollapseItem>

      <ElCollapseItem name="other">
        <span class="zj-span">其他组件</span>
        <div
          v-for="(item, index) in otherNodes"
          :key="index"
          class="red-ui-palette-node ui-draggable ui-draggable-handle"
          :style="{ backgroundColor: item.background }"
          @mousedown="startDrag(item)"
        >
          <div class="red-ui-palette-label">
            {{ item.text }}
          </div>
          <div class="red-ui-palette-icon-container">
            <div
              class="red-ui-palette-icon"
              :style="{ backgroundImage: `url(${item.icon})`}"
            />
          </div>
          <div class="red-ui-palette-port red-ui-palette-port-input" />
          <div class="red-ui-palette-port red-ui-palette-port-output" />
        </div>
      </ElCollapseItem>

      <ElCollapseItem name="group">
        <span class="zj-span">分组</span>
        <div
          v-for="(item, index) in groupNodes"
          :key="index"
          class="red-ui-palette-node ui-draggable ui-draggable-handle"
          :style="{ backgroundColor: item.background }"
          @mousedown="startDrag(item)"
        >
          <div class="red-ui-palette-label">
            {{ item.text }}
          </div>
          <div class="red-ui-palette-icon-container">
            <div
              class="red-ui-palette-icon"
              :style="{ backgroundImage: `url(${item.icon})`}"
            />
          </div>
          <div class="red-ui-palette-port red-ui-palette-port-input" />
          <div class="red-ui-palette-port red-ui-palette-port-output" />
        </div>
      </ElCollapseItem>
    </ElCollapse>
  </div>
</template>

<script lang="ts" setup>
import GroupParallelSVG from '@/views/liteflow/logic/node-red/images/GroupParallel.svg'
import NodeBreakComponentSVG from '@/views/liteflow/logic/node-red/images/NodeBreakComponent.svg'
import NodeComponentSVG from '@/views/liteflow/logic/node-red/images/NodeComponent.svg'
import NodeFinallyComponentSVG from '@/views/liteflow/logic/node-red/images/NodeEndComponent.svg'
import NodeFallbackComponentSVG from '@/views/liteflow/logic/node-red/images/NodeFallbackComponent.svg'
import NodeForComponentSVG from '@/views/liteflow/logic/node-red/images/NodeForComponent.svg'
import NodeIfComponentSVG from '@/views/liteflow/logic/node-red/images/NodeIfComponent.svg'
import NodeIteratorComponentSVG from '@/views/liteflow/logic/node-red/images/NodeIteratorComponent.svg'
import NodeScriptComponentSVG from '@/views/liteflow/logic/node-red/images/NodeScriptComponent.svg'
import NodePreComponentSVG from '@/views/liteflow/logic/node-red/images/NodeStartComponent.svg'
import NodeSwitchComponentSVG from '@/views/liteflow/logic/node-red/images/NodeSwitchComponent.svg'
import NodeWhileComponentSVG from '@/views/liteflow/logic/node-red/images/NodeWhileComponent.svg'

import LogicFlow from "@logicflow/core"

import { ref } from 'vue'

const props = defineProps({
  lf: {
    type: LogicFlow,
    required: true,
  },
})

const activeNames = ref(['base'])

const startDrag = item => {
  const { lf } = props

  lf.dnd.startDrag({
    type: item.type,
    text: item.text,
  })
}

const baseNodes = ref([
  {
    type: 'common',
    text: '普通组件',
    background: 'rgb(255, 255, 255)',
    icon: NodeComponentSVG,
  },
  {
    type: 'switch',
    text: '选择组件',
    background: 'rgb(255, 255, 255)',
    icon: NodeSwitchComponentSVG,
  },
  {
    type: 'if',
    text: '条件组件',
    background: 'rgb(255, 255, 255)',
    icon: NodeIfComponentSVG,
  },
  {
    type: 'for',
    text: '次数循环组件',
    background: 'rgb(255, 255, 255)',
    icon: NodeForComponentSVG,
  },
  {
    type: 'while',
    text: '条件循环组件',
    background: 'rgb(255, 255, 255)',
    icon: NodeWhileComponentSVG,
  },
  {
    type: 'iterator',
    text: '迭代循环组件',
    background: 'rgb(255, 255, 255)',
    icon: NodeIteratorComponentSVG,
  },
  {
    type: 'break',
    text: '退出循环组件',
    background: 'rgb(255, 255, 255)',
    icon: NodeBreakComponentSVG,
  },
])

const otherNodes = ref([
  {
    type: 'NodePreComponent',
    text: '前置组件',
    background: 'rgb(255, 255, 255)',
    icon: NodePreComponentSVG,
  },
  {
    type: 'NodeFinallyComponent',
    text: '后置组件',
    background: 'rgb(255, 255, 255)',
    icon: NodeFinallyComponentSVG,
  },
  {
    type: 'fallback',
    text: '降级组件',
    background: 'rgb(255, 255, 255)',
    icon: NodeFallbackComponentSVG,
  },
  {
    type: 'NodeScriptComponent',
    text: '脚本组件',
    background: 'rgb(255, 255, 255)',
    icon: NodeScriptComponentSVG,
  },
])


const groupNodes = ref([
  {
    type: 'GroupParallel',
    text: '分组组件',
    background: 'rgb(255, 255, 255)',
    icon: GroupParallelSVG,
  },
  // {
  //   type: 'GroupSerial',
  //   text: '串行分组',
  //   background: 'rgb(255, 255, 255)',
  //   icon: GroupSerialSVG,
  // },
  // {
  //   type: 'GroupSerial',
  //   text: '子流程分组',
  //   background: 'rgb(255, 255, 255)',
  //   icon: GroupSerialSVG,
  // },
])
</script>

<style scoped>
.demo-collapse {
  inline-size: 150px;
}

.demo-collapse /deep/ .el-collapse-item__header {
  text-indent: 20px;
}

.red-ui-palette-node {
  position: relative;
  border: 1px solid #999;
  border-radius: 5px;
  background: #fff;
  background-position: 5% 50%;
  background-repeat: no-repeat;
  background-size: contain;
  block-size: 25px;
  cursor: move;
  inline-size: 120px;
  margin-block: 10px;
  margin-inline: auto;
}

.red-ui-palette-label {
  overflow: hidden;
  color: #333;
  font-size: 13px;
  line-height: 16px;
  margin-block: 4px;
  margin-inline: 32px 0;
  text-align: center;
  user-select: none;
}

.red-ui-palette-icon-container {
  position: absolute;
  background-color: rgba(0, 0, 0, 5%);
  border-inline-end: 1px solid rgba(0, 0, 0, 5%);
  inline-size: 30px;
  inset-block: 0;
  inset-inline-start: 0;
  text-align: center;
}

.red-ui-palette-icon {
  display: inline-block;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: contain;
  block-size: 100%;
  inline-size: 20px;
}

.red-ui-palette-port-output {
  inset-inline: auto -6px;
}

.red-ui-palette-port {
  position: absolute;
  box-sizing: border-box;
  border: 1px solid #999;
  border-radius: 3px;
  background: #d9d9d9;
  block-size: 10px;
  inline-size: 10px;
  inset-block-start: 8px;
  inset-inline-start: -5px;
}

.red-ui-palette-node .red-ui-palette-port-input {
  display: none;
}

.red-ui-palette-node .red-ui-palette-port-output {
  display: none;
}

.zj-span {
  display: inline-block;
  inline-size: 100%;
  margin-block-start: 8px;
  text-align: center;
}
</style>
